<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      v-model="visible"
      title="自定义列"
      @ok="handleOk"
    >
      <a-space>
        <a-card title="可添加的列">
          <div class="addColumn">
            <div class="leftCanAddColumn">
              <a-anchor
                ><a-anchor-link
                  v-for="(item, index) in list"
                  :key="index"
                  :href="'#title' + index"
                  :title="item.orgName"
              /></a-anchor>
            </div>
            <div class="rightCanAddColumn">
              <div
                class="list"
                v-for="(item, index) in list"
                :id="'title' + index"
                :key="index"
              >
                <div style="background-color: #eee">
                  <a-checkbox
                    :indeterminate="item.indeterminate"
                    :checked="item.checkAll"
                    @change="onCheckAllChange(index, $event)"
                  >
                    {{ item.orgName }}
                  </a-checkbox>
                </div>
                <a-checkbox-group
                  v-model="item.checkedList"
                  :options="item.userList"
                  @change="onChange($event, index)"
                />
              </div>
            </div>
          </div>
        </a-card>
        <a-card :title="'已选择' + userIds.length + '项'">
          <a style="font-size: 13px" @click="clear" slot="extra" href="#"
            >清楚全部</a
          >
          <template v-if="userIds.length">
            <draggable
              chosenClass="chosen"
              forceFallback="true"
              @end="onEnd"
              v-model="userIds"
            >
              <transition-group>
                <div class="menu" v-for="(item, index) in userIds" :key="index">
                  <div class="left"><a-icon type="menu" /> {{ item }}</div>
                  <a-icon @click="remove(item, index)" type="close" />
                </div>
              </transition-group>
            </draggable>
          </template>
          <template v-else>
            <a-empty description="暂无数据" :image="simpleImage" />
          </template>
        </a-card>
      </a-space>
    </a-modal>
  </div>
</template>
<script>
  const result = [
    {
      orgName: "火影村",
      checkAll: false,
      indeterminate: false,
      checkedList: [],
      userList: [
        {
          label: "鸣人",
          value: "鸣人",
        },
        {
          label: "佐助",
          value: "佐助",
        },
        {
          label: "自来也",
          value: "自来也",
        },
        {
          label: "卡卡西",
          value: "卡卡西",
        },
        {
          label: "小樱",
          value: "小樱",
        },
      ],
    },
    {
      orgName: "晓组织",
      checkAll: false,
      indeterminate: false,
      checkedList: [],
      userList: [
        {
          label: "佩恩",
          value: "佩恩",
        },
        {
          label: "角度",
          value: "角度",
        },
        {
          label: "长门",
          value: "长门",
        },
        {
          label: "蝎",
          value: "蝎",
        },
        {
          label: "再不斩",
          value: "再不斩",
        },
      ],
    },
    {
      orgName: "宇智波",
      checkAll: false,
      indeterminate: false,
      checkedList: [],
      userList: [
        {
          label: "宇智波鼬",
          value: "宇智波鼬",
        },
        {
          label: "宇智波带土",
          value: "宇智波带土",
        },
        {
          label: "宇智波斑",
          value: "宇智波斑",
        },
        {
          label: "宇智波止水",
          value: "宇智波止水",
        },
        {
          label: "宇智波佐助",
          value: "宇智波佐助",
        },
      ],
    },
  ];
  import { Empty } from "ant-design-vue";
  //导入draggable组件
  import draggable from "vuedraggable";
  export default {
    name: "CustomColumns",
    data() {
      return {
        visible: false,
        list: result,
        userIds: [],
      };
    },
    components: { draggable },
    // computed: {
    //   listComputed: {
    //     get() {
    //       const checkedList = this.list.reduce(
    //         (accumulator, currentValue) =>
    //           accumulator.concat(currentValue.checkedList),
    //         []
    //       );
    //       return checkedList;
    //     },
    //     set(value) {
    //       console.log(value);
    //     },
    //   },
    // },
    methods: {
      open() {
        this.visible = true;
      },
      handleOk() {
        console.log(this.userIds, "返回给外部的数据");
        alert(this.userIds, "返回给外部的数据")
      },
      onCheckAllChange(index, e) {
        if (e.target.checked) {
          this.list[index].checkedList = this.list[index].userList.map(
            (item) => item.value
          );
        } else {
          this.list[index].checkedList = [];
        }
        this.list[index].checkAll = e.target.checked;
        this.list[index].indeterminate = false;
        this.rightData();
      },
      onChange(checkedList, index) {
        this.list[index].indeterminate =
          !!checkedList.length &&
          checkedList.length < this.list[index].userList.length;
        this.list[index].checkAll =
          checkedList.length === this.list[index].userList.length;
        this.rightData();
      },
      clear() {
        this.list.forEach((item) => {
          item.checkedList = [];
          item.checkAll = false;
          item.indeterminate = false;
        });
        this.userIds = [];
      },
      remove(item, index) {
        console.log(item, index);
        this.list.forEach((item1) => {
          if (item1.checkedList.includes(item)) {
            const index = item1.checkedList.findIndex(
              (item2) => item2 === item
            );
            item1.checkedList.splice(index, 1);
            if (item1.checkedList.length) {
              item1.indeterminate = true;
            } else {
              item1.indeterminate = false;
            }
            item1.checkAll = false;
          }
        });
        const index1 = this.userIds.findIndex((item) => item === item);
        this.userIds.splice(index1, 1);
      },
      onEnd(value) {
        console.log(this.userIds, value);
      },
      rightData() {
        let userIds = [];
        this.list.forEach((item) => {
          userIds = [...userIds, ...item.checkedList];
        });
        this.userIds = userIds;
      },
    },
    beforeCreate() {
      this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
    },
  };
</script>
<style scoped>
  /deep/ .ant-modal {
    width: 800px !important;
  }
  /deep/ .ant-space-align-center {
    width: 100%;
    justify-content: center;
  }
  /deep/ .ant-space-item:nth-child(1) {
    width: 500px !important;
  }
  /deep/ .ant-space-item:nth-child(2) {
    width: 220px !important;
    height: 390px;
  }
  /deep/ .ant-space-item:nth-child(1) .ant-card {
    width: 100% !important;
  }
  /deep/ .ant-card-body {
    padding: 16px !important;
    height: 333px;
    overflow: auto;
  }
  .addColumn {
    display: flex;
  }
  .leftCanAddColumn {
    width: 200px;
    flex-direction: column;
    display: flex;
    margin-right: 10px;
    height: 300px;
    overflow: auto;
  }
  .leftCanAddColumn .ant-anchor {
    margin-bottom: 100px;
    cursor: pointer;
  }
  .rightCanAddColumn {
    flex-grow: 1;
    height: 300px;
    overflow: auto;
  }
  .cur {
    font-size: 17px;
    font-weight: bold;
  }
  /deep/ .ant-checkbox-group-item {
    width: 47%;
    margin: 20px 0;
  }
  /deep/ .ant-card-head-title {
    margin-right: 10px;
  }
  .menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eee;
    margin-bottom: 10px;
    border-radius: 4px;
    height: 30px;
    width: 168px;
    padding: 0 10px;
  }
  /deep/ .ant-anchor-ink {
    display: none;
  }
  /deep/ .ant-anchor-link {
    padding-bottom: 90px;
  }
</style>